<template>
  <div class="comm" style="margin-top: 90px">
    <h1>社区</h1>
    <button @click="clickEvent">请求</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "CommView",
  data() {
    return {};
  },
  created() {
    // axios用法
    // 目标：增删改查四个API，以及一个通用请求API
    // GET请求：获取数据
    // axios.get("/lqb/api/course-group-list?course_fields=1").then((data) => {
    //   console.log(data);
    // });
    // GET请求参数对象写法
    axios
      .get("/lqb/api/course-group-list", {
        params: {
          // params固定的
          course_fields: 1,
        },
      })
      .then(({ data: { course_fields } }) => {
        console.log(course_fields);
      });

    const user = {
      name: "小明",
      other: {
        age: 22,
        common: {
          sex: "男",
        },
      },
    };
    const { name } = user;
    const {
      other: { age },
    } = user;
    const {
      other: {
        common: { sex },
      },
    } = user;
    console.log(name, age, sex);

    // POST请求：在服务器中新增数据。比如：注册用户，添加学员。
    // axios
    //   .post(
    //     "https://console-mock.apipost.cn/app/mock/project/90866e61-496a-47ab-be11-f1f75ee2e5cc/regist?a=10&b=20"
    //   )
    //   .then(({ data }) => {
    //     console.log(data);
    //   });

    // axios
    //   .post(
    //     "https://console-mock.apipost.cn/app/mock/project/90866e61-496a-47ab-be11-f1f75ee2e5cc/regist",
    //     {
    //       a: 10,
    //       b: 20,
    //     }
    //   )
    //   .then(({ data }) => {
    //     console.log(data);
    //   });

    // PUT请求：修改服务器数据
    // axios
    //   .put(
    //     "https://console-mock.apipost.cn/app/mock/project/90866e61-496a-47ab-be11-f1f75ee2e5cc/regist",
    //     {
    //       a: 10,
    //       b: 20,
    //     }
    //   )
    //   .then(({ data }) => {
    //     console.log(data);
    //   });

    // DELETE请求：删除服务器资源，跟GET语法一样
    // axios
    //   .delete("xxx", {
    //     params: {
    //       // params固定的
    //       course_fields: 1,
    //     },
    //   })
    //   .then(({ data: { course_fields } }) => {
    //     console.log(course_fields);
    //   });

    // 通用请求
    // axios({
    //   url: "xxx",
    //   method: "GET/POST/PUT/DELETE",
    //   headers: {},
    //   params: {}, // GET/DELETE请求使用params携带参数。
    //   data: {}, // POST/PUT请求使用data携带参数。
    // });

    // Promise出现的原因？就是为了解决异步任务的返回值问题。在函数调用处，无法获取异步任务内部的结果。(使用 return 和 全局变量都不行，为什么不行？)
    // 为什么使用Promise可以？调用函数，得到一个Promise对象，这个对象恰好有一个.then方法，在Promise内部执行resolve从而触发.then，接收异步任务的返回值。

    const p1 = this.requestTool();
    p1.then((data) => {
      console.log("---", data);
    });
  },
  methods: {
    requestTool(title) {
      return new Promise((resolve, reject) => {
        console.log("立即执行异步任务: ", title);
        axios
          .get("/lqb/api/course-group-list", {
            params: {
              // params固定的
              course_fields: 1,
            },
          })
          .then(({ data: { course_fields } }) => {
            resolve(course_fields);
          });
      });
    },
    async clickEvent() {
      // const p2 = this.requestTool();
      // p2.then((data) => {
      //   console.log("===", data);
      // });

      // Promise解决回调地狱问题？
      // 前提：一次性发送多个异步请求，且请求存在先后顺序。
      // 常见：1. 先请求获取定位数据；2. 根据定位数据，发送请求获取天气数据；3. 再根据天气数据，发送请求获取用户建议数据(适合洗车、出门远行)；
      // axios.get().then(({ data: location }) => {
      //   const params = location;
      //   if (params) {
      //     const url = "";
      //   } else {
      //     const url = "";
      //   }
      //   axios.get().then(({ data: weather }) => {
      //     const params = location;
      //     if (params) {
      //       const url = "";
      //     } else {
      //       const url = "";
      //     }
      //     axios.get().then(({ data: suggest }) => {
      //       const params = location;
      //       if (params) {
      //         const url = "";
      //       } else {
      //         const url = "";
      //       }
      //     });
      //   });
      // });

      // await: 后面必须跟Promise对象，等待，阻塞当前代码的执行，直到内部的Promise触发了resolve函数，证明这个任务执行成功，当前的代码才会继续向下执行。
      // await所在的函数，必须有async修饰。
      const location = await this.requestTool("定位"); // 这个Promise触发了resolve，才会执行下一句代码
      console.log("lcoation: ", location);
      const weather = await this.requestTool("天气"); // 这个Promise触发了resolve，才会执行下一句代码
      console.log("weather: ", weather);
      const suggest = await this.requestTool("建议"); // 这个Promise触发了resolve，才会执行下一句代码
      console.log("suggest: ", suggest);

      // async+await 实现多个异步任务同步执行，解决回调地狱的问题。
    },
  },
};
</script>

<style lang="scss" scoped></style>
